<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员添加表</title>
    <script src="../js/jquery-2.2.3.min.js"></script>
    <script>
        $(function () {
            alert("ceshi");
            str = "看看我的窗体效果";
            showWindow('我的提示框',str,850,250,true);
        })

        //判断是否为数组
        function isArray(v)
        {
            return v && typeof v.length == 'number' && typeof v.splice == 'function';
        }
        //创建元素
        function createEle(tagName)
        {
            return document.createElement(tagName);
        }
        //在body中添加子元素
        function appChild(eleName)
        {
            return document.body.appendChild(eleName);
        }
        //从body中移除子元素
        function remChild(eleName)
        {
            return document.body.removeChild(eleName);
        }
        //弹出窗口，标题（html形式）、html、宽度、高度、是否为模式对话框(true,false)、按钮（关闭按钮为默认，格式为['按钮1',fun1,'按钮2',fun2]数组形式，前面为按钮值，后面为按钮onclick事件）
        function showWindow(title,html,width,height,modal,buttons)
        {
//避免窗体过小
            if (width < 300)
            {
                width = 300;
            }
            if (height < 200)
            {
                height = 200;
            }
//声明mask的宽度和高度（也即整个屏幕的宽度和高度）
            var w,h;
//可见区域宽度和高度
            var cw = document.body.clientWidth;
            var ch = document.body.clientHeight;
//正文的宽度和高度
            var sw = document.body.scrollWidth;
            var sh = document.body.scrollHeight;
//可见区域顶部距离body顶部和左边距离
            var st = document.body.scrollTop;
            var sl = document.body.scrollLeft;
            w = cw > sw ? cw:sw;
            h = ch > sh ? ch:sh;
//避免窗体过大
            if (width > w)
            {
                width = w;
            }
            if (height > h)
            {
                height = h;
            }
//如果modal为true，即模式对话框的话，就要创建一透明的掩膜
            if (modal)
            {
                var mask = createEle('div');
                mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:10000;width:" + w + "px;height:" + h + "px;";
                appChild(mask);
            }
//这是主窗体
            var win = createEle('div');
            win.style.cssText = "position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) + "px;background:#f0f0f0;z-index:10001;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;";
//标题栏
            var tBar = createEle('div');
//afccfe,dce8ff,2b2f79
            tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;";
//标题栏中的文字部分
            var titleCon = createEle('div');
            titleCon.style.cssText = "float:left;margin:3px;";
            titleCon.innerHTML = title;//firefox不支持innerText，所以这里用innerHTML
            tBar.appendChild(titleCon);
//标题栏中的“关闭按钮”
            var closeCon = createEle('div');
            closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可用
            closeCon.innerHTML = "×";
            tBar.appendChild(closeCon);
            win.appendChild(tBar);
//窗体的内容部分，CSS中的overflow使得当内容大小超过此范围时，会出现滚动条
            var htmlCon = createEle('div');
            htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + (height - 50) + "px;overflow:auto;";
            htmlCon.innerHTML = html;
            win.appendChild(htmlCon);
//窗体底部的按钮部分
            var btnCon = createEle('div');
            btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;";
//如果参数buttons为数组的话，就会创建自定义按钮
            if (isArray(buttons))
            {
                var length = buttons.length;
                if (length > 0)
                {
                    if (length % 2 == 0)
                    {
                        for (var i = 0; i < length; i = i + 2)
                        {
//按钮数组
                            var btn = createEle('button');
                            btn.innerHTML = buttons[i];//firefox不支持value属性，所以这里用innerHTML
// btn.value = buttons[i];
                            btn.onclick = buttons[i + 1];
                            btnCon.appendChild(btn);
//用户填充按钮之间的空白
                            var nbsp = createEle('label');
                            nbsp.innerHTML = "  ";
                            btnCon.appendChild(nbsp);
                        }
                    }
                }
            }
//这是默认的关闭按钮
            var btn = createEle('button');
// btn.setAttribute("value","关闭");
            btn.innerHTML = '关闭';
// btn.value = '关闭';
            btnCon.appendChild(btn);
            win.appendChild(btnCon);
            appChild(win);
            /*************************************以下为拖动窗体事件*********************/
//鼠标停留的X坐标
            var mouseX = 0;
//鼠标停留的Y坐标
            var mouseY = 0;
//窗体到body顶部的距离
            var toTop = 0;
//窗体到body左边的距离
            var toLeft = 0;
//判断窗体是否可以移动
            var moveable = false;
//标题栏的按下鼠标事件
            tBar.onmousedown = function()
            {
                var eve = getEvent();
                moveable = true;
                mouseX = eve.clientX;
                mouseY = eve.clientY;
                toTop = parseInt(win.style.top);
                toLeft = parseInt(win.style.left);
//移动鼠标事件
                tBar.onmousemove = function()
                {
                    if(moveable)
                    {
                        var eve = getEvent();
                        var x = toLeft + eve.clientX - mouseX;
                        var y = toTop + eve.clientY - mouseY;
                        if (x > 0 && (x + width < w) && y > 0 && (y + height < h))
                        {
                            win.style.left = x + "px";
                            win.style.top = y + "px";
                        }
                    }
                }
//放下鼠标事件，注意这里是document而不是tBar
                document.onmouseup = function()
                {
                    moveable = false;
                }
            }
//获取浏览器事件的方法，兼容ie和firefox
            function getEvent()
            {
                return window.event || arguments.callee.caller.arguments[0];
            }
//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件
            btn.onclick = closeCon.onclick = function()
            {
                remChild(win);
                remChild(mask);
            }
        }
    </script>
</head>
<body>

</body>
</html>
